<style lang="less">
.page-templets{
    .main .main-form{
        width: 54%;
    }

    .text-help{
        margin: 0;
        font-size: 12px;
        line-height: 1;
        color: #B4B4B4;
    }

    .label-add{
        margin-top: 5px;
        border:1px #B4B4B4 solid;
    }
    .label-edit-header {
        padding: 10px;
        display: inline-block;
    }
    .label-edit-input {
        margin-left: 10px;
        width: 250px;
    }
    .keyword-button {
         margin: 5px;
    }
    .keyword-button-show:hover {
        background-color: #00dbff
    }
    .keyword-button-delete {
        top: -15px;
        position: relative;
        right: -20px;
        color: red;
    }
    
}
.confirm-btn {
    text-align: center;
    margin-top: 30px;
    margin-left: 50%
}

.confirm-span {
    text-align: center;
    margin-top: 30px;
    margin-left: 80%;
    font-size: 20px;
}
</style>
<template>
    <div class="main page-font">
        <div class="main-header">
            <el-breadcrumb>
                <el-breadcrumb-item :to="{ path: '/tickets' }">票券查询</el-breadcrumb-item>
                <el-breadcrumb-item>票券申请</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <el-form class="main-form" label-width="100px" :model="itemModel" @submit.native.prevent="save()">
            <el-form-item label="票券大类">
                <el-select v-model="itemModel.parent_id" >
                    <el-option
                        v-for="item in parents"
                        :label="item.name"
                        :value="item.id"
                        :key="item.id"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="票券类型">
                <el-select @change="getNum" v-model="itemModel.type_id">
                    <el-option
                        v-for="item in ticketSel"
                        :label="item.name"
                        :value="item.id"
                        :key="item.id"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="类型">
                <el-select v-model="itemModel.type">
                    <el-option
                        v-for="item in types"
                        :label="item"
                        :value="item"
                        :key="item"
                    ></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="客户">
                <el-select v-model="itemModel.customer_id">
                    <el-option
                        v-for="item in customers"
                        :label="item.name"
                        :value="item.id"
                        :key="item.id"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="申请数量数量">
                <el-input-number v-model="itemModel.num" :min="0"></el-input-number>
                <span class="tips" style="margin-left:.6em;color:#999">* 剩余数量{{leftNum}}张</span>
            </el-form-item>
            <el-form-item label="价格">
                <el-input v-model="itemModel.price"></el-input>
            </el-form-item>
            <!-- <el-form-item v-for="attr in attrs" v-bind:key="attr.id" :label="attr.name">
                <el-checkbox-group v-model="attr.values" @change="onAttrChange(attr)">
                    <el-checkbox v-for="item in attr.items" v-bind:key="item.id" :label="item">{{item.name}}</el-checkbox>
                </el-checkbox-group>
            </el-form-item> -->
            <el-form-item label="申请理由">
                <el-input type="textarea" v-model="itemModel.remark"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="addApply">添加申请</el-button>
            </el-form-item>
        </el-form>
        <el-table
            border
            :data="applys"
            >
            <el-table-column label="票券大类" inline-template>
                <div>
                    <el-select v-model="row.parent_id" disabled>
                    <el-option
                        v-for="item in parents"
                        :label="item.name"
                        :value="item.id"
                        :key="item.id"
                    >
                    </el-option>
                </el-select>
                </div>
            </el-table-column>
            <el-table-column label="票券类型" inline-template>
                <div>
                   <el-select v-model="row.type_id" disabled>
                    <el-option
                        v-for="item in ticketSel"
                        :label="item.name"
                        :value="item.id"
                        :key="item"
                    ></el-option>
                    </el-select>
                </div>
            </el-table-column>
            <el-table-column label="类型" inline-template>
                <div>
                   <el-select v-model="row.type">
                    <el-option
                        v-for="item in types"
                        :label="item"
                        :value="item"
                        :key="item"
                    ></el-option>
                </el-select>
                </div>
            </el-table-column>
            <el-table-column label="客户" inline-template>
                <div>
                    <el-select v-model="row.customer_id" >
                        <el-option
                            v-for="item in customers"
                            :label="item.name"
                            :value="item.id"
                            :key="item.id"
                        >
                        </el-option>
                    </el-select>
                </div>
            </el-table-column>
            <el-table-column prop="num" label="数量"></el-table-column>
            <el-table-column prop="price" label="统一价格"></el-table-column>
            <el-table-column prop="private_price" label="总计" inline-template>
                <div>
                    ￥{{row.num * row.price}}
                </div>
            </el-table-column>
            <el-table-column prop="remark" label="申请理由"></el-table-column>
            <el-table-column label="操作" inline-template>
                <div class="item-menus">
                    <el-button size="small" type="danger" @click="deleteItem(row)">删除</el-button>
                </div>
            </el-table-column>
        </el-table>
        <el-row>
            <span class="confirm-span">总计：￥ {{total}}</span>
        </el-row>
        <el-row>
            <el-button class="confirm-btn" :loading="loading" native-type="submit" type="primary" @click="confirmApply">提交申请</el-button>
        </el-row>
    </div>
</template>

<script>
import lodash from 'lodash';
import ItemController from '../controllers/item';

import Ticket from '../models/ticket';
import AttributeModel from '../models/attribute';
import TypeModel from '../models/type';
import CustomModel from '../models/customer';
import Apply from '../models/apply';


export default new ItemController({
    data() {
        return {
            itemModel: new Apply({
                type: '销售',
                type_id: 0,
                parent_id: 0,
                num: 1,
                price: 1,
                remark: '',
                customer_id: 0,
            }),
            leftNum: 10,
            applys: [],
            attrs: [],
            customers: [],
            grands: [],
            parents: [],
            types: [
                '销售',
                '串换',
                '赠送',
                '备售',
            ],
            ticketSel: [],
            total: 0,
            loading: false,
        };
    },
    methods: {
        beforeLoadModel() {
            return Promise.all([
                // this.loadGrands(),
                this.loadParents(),
                this.loadCustomers()
            ]);
        },
        loadTickets(parent_id) {
            return TypeModel.query({
                parent_id: parent_id,
            })
            .$promise
            .then(types => {
                this.ticketSel = types.items;
                this.itemModel.type_id = types.items[0].id;
            });
        },
        loadParents() {
            return TypeModel.query({
                parent_id: 0
            })
            .$promise
            .then(types => {
                this.parents = types.items;
                this.itemModel.parent_id = types.items[0].id;
                return this.getNum();
            });
        },
        loadCustomers() {
            return CustomModel.query({
            })
            .$promise
            .then(customers => {
                this.customers = customers.items;
                this.itemModel.customer_id = customers.items[0].id;
            });
        },
        addApply() {
            console.log(this.itemModel.num, this.leftNum);
            if(this.itemModel.num > this.leftNum) {
                this.$message.info('余票不足');
                return;
            }
            if(this.itemModel.num < 1) {
                this.$message.info('请输入申请数量');
                return;
            }
            if(!/(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/.test(this.itemModel.price)) {
                this.$message.info('请输入正确的价格');
                return;
            }
            this.applys.push(this.itemModel);
            this.itemModel = {
                parent_id: this.parents[0].id,
                num: '',
                remark: '',
                type: '销售',
                price: 0,
                type_id: this.ticketSel[0].id,
                customer_id: this.customers && this.customers[0] ? this.customers[0].id : 0,
            };
            let total = 0;
            this.applys.map(item => {
                console.log(total);
                total += item.num * item.price
            });
            this.total = total;
        },
        confirmApply() {
            this.loading = true;
            this.$confirm('确认提交申请')
            .then(() => {
                return Apply.save({
                    items: this.applys
                })
                .$promise
                .then(() => {
                    this.loading = false;
                    this.$message.success('提交申请成功');
                    setTimeout(() => {
                        this.$router.push('/tickets/apply-list');
                    }, 1000)
                });
            })
        },
        afterSave() {
            this.$message.success('保存成功');

            // this.$router.back();
        },
        getNum() {
            return Ticket.query({
                type_id: this.itemModel.type_id,
                status: 0,
            })
            .$promise
            .then(data => {
                this.leftNum = data.pagination.total;
            })
        },
        deleteItem(row) {
            this.$confirm('确认移除该条申请')
            .then(() => {
                for(let i = 0; i < this.applys.length; i++) {
                    if(this.applys[i].id === row.id) {
                        if(this.applys.length === 1) {
                            this.applys = [];
                        }
                        else {
                            this.applys.splice(i, 1);
                        }
                        break;
                    }       
                }
            });
        }
    },
    watch: {
        'itemModel.parent_id': {
            deep: true,
            handler(newVal, oladVal) {
                console.log(newVal, oladVal)
                return this.loadTickets(newVal);
            }
        },
    }
});
</script>
